<!-- navbar header -->
<div class="navbar-header {{app.settings.navbarHeaderColor}}">
  <button class="pull-right visible-xs dk" appUiToggleClass="show" dateTarget=".navbar-collapse">
    <i class="glyphicon glyphicon-cog"></i>
  </button>
  <button class="pull-right visible-xs" appUiToggleClass="off-screen" dateTarget=".app-aside" ui-scroll-to="app">
    <i class="glyphicon glyphicon-align-justify"></i>
  </button>
  <!-- brand -->
  <a routerLink="/" class="navbar-brand text-lt">
    <i class="fa fa-btc"></i>
    <img src="assets/img/logo.png" alt="." class="hide">
    <span class="hidden-folded m-l-xs">{{app.name}}</span>
  </a>
  <!-- / brand -->
</div>
<!-- / navbar header -->

<!-- navbar collapse -->
<div class="collapse pos-rlt navbar-collapse box-shadow {{app.settings.navbarCollapseColor}}">
  <!-- buttons -->
  <div class="nav navbar-nav hidden-xs">
    <a href="javascript:;" class="btn no-shadow navbar-btn">
      <i (click)="app.settings.asideFolded = !app.settings.asideFolded"
         class="fa {{app.settings.asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw"></i>
    </a>
  </div>
  <!-- / buttons -->

  <!-- link and dropdown -->
  <ul class="nav navbar-nav hidden-sm">
    <li class="dropdown pos-stc" dropdown>
      <a class="dropdown-toggle" dropdownToggle>
        <span>Mega</span>
        <span class="caret"></span>
      </a>
      <div *dropdownMenu class="dropdown-menu wrapper w-full bg-white">
        <div class="row">
          <div class="col-sm-4">
            <div class="m-l-xs m-t-xs m-b-xs font-bold">Pages <span class="badge badge-sm bg-success">10</span></div>
            <div class="row">
              <div class="col-xs-6">
                <ul class="list-unstyled l-h-2x">
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Profile</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Post</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Search</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Invoice</a>
                  </li>
                </ul>
              </div>
              <div class="col-xs-6">
                <ul class="list-unstyled l-h-2x">
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Price</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Lock screen</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sign in</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sign up</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-sm-4 b-l b-light">
            <div class="m-l-xs m-t-xs m-b-xs font-bold">UI Kits <span class="label label-sm bg-primary">12</span></div>
            <div class="row">
              <div class="col-xs-6">
                <ul class="list-unstyled l-h-2x">
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Buttons</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Icons <span
                      class="badge badge-sm bg-warning">1000+</span></a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Grid</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Widgets</a>
                  </li>
                </ul>
              </div>
              <div class="col-xs-6">
                <ul class="list-unstyled l-h-2x">
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Bootstap</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Sortable</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Portlet</a>
                  </li>
                  <li>
                    <a href><i class="fa fa-fw fa-angle-right text-muted m-r-xs"></i>Timeline</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-sm-4 b-l b-light">
            <div class="m-l-xs m-t-xs m-b-sm font-bold">Analysis</div>
            <div class="text-center">
              <div class="inline">
                <!--<div ui-jq="easyPieChart" ui-options="{
                          percent: 65,
                          lineWidth: 50,
                          trackColor: '{{app.color.light}}',
                          barColor: '{{app.color.info}}',
                          scaleColor: false,
                          size: 100,
                          rotate: 90,
                          lineCap: 'butt',
                          animate: 2000
                        }">
                </div>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="dropdown" dropdown>
      <a class="dropdown-toggle" dropdownToggle>
        <i class="fa fa-fw fa-plus visible-xs-inline-block"></i>
        <span translate="header.navbar.new.NEW">New</span> <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#" translate="header.navbar.new.PROJECT">Projects</a></li>
        <li>
          <a href>
            <span class="badge bg-info pull-right">5</span>
            <span translate="header.navbar.new.TASK">Task</span>
          </a>
        </li>
        <li><a translate="header.navbar.new.USER">User</a></li>
        <li class="divider"></li>
        <li>
          <a href>
            <span class="badge bg-danger pull-right">4</span>
            <span translate="header.navbar.new.EMAIL">Email</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
  <!-- / link and dropdown -->

  <!-- search form -->
  <form class="navbar-form navbar-form-sm navbar-left shift" ui-shift="prependTo" target=".navbar-collapse"
        role="search" ng-controller="TypeaheadDemoCtrl">
    <div class="form-group">
      <div class="input-group">
        <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8"
               class="form-control input-sm bg-light no-border rounded padder" placeholder="搜索...">
        <span class="input-group-btn">
                <button type="submit" class="btn btn-sm bg-light rounded"><i class="fa fa-search"></i></button>
              </span>
      </div>
    </div>
  </form>
  <!-- / search form -->

  <!-- nabar right -->
  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown hidden-sm" is-open="lang.isopen" dropdown>
      <a class="dropdown-toggle" dropdownToggle>
        {{app.selectedLang}} <b class="caret"></b>
      </a>
      <!-- dropdown -->
      <ul class="dropdown-menu animated fadeInRight w">
        <li *ngFor="let lang of app.langs">
          <a (click)="setLang(lang.langKey, $event)" href>{{lang.label}}</a>
        </li>
      </ul>
      <!-- / dropdown -->
    </li>
    <li class="hidden-xs">
      <a ui-fullscreen></a>
    </li>
    <li class="dropdown" dropdown>
      <a class="dropdown-toggle" dropdownToggle>
        <i class="icon-bell fa-fw"></i>
        <span class="visible-xs-inline">Notifications</span>
        <span class="badge badge-sm up bg-danger pull-right-xs">2</span>
      </a>
      <!-- dropdown -->
      <div class="dropdown-menu w-xl animated fadeInUp">
        <div class="panel bg-white">
          <div class="panel-heading b-light bg-light">
            <strong>You have <span>2</span> notifications</strong>
          </div>
          <div class="list-group">
            <a class="list-group-item">
                    <span class="pull-left m-r thumb-sm">
                      <img src="assets/img/a0.jpg" alt="..." class="img-circle">
                    </span>
              <span class="clear block m-b-none">
                      Use awesome animate.css<br>
                      <small class="text-muted">10 minutes ago</small>
                    </span>
            </a>
            <a class="list-group-item">
                    <span class="clear block m-b-none">
                      1.0 initial released<br>
                      <small class="text-muted">1 hour ago</small>
                    </span>
            </a>
          </div>
          <div class="panel-footer text-sm">
            <a class="pull-right"><i class="fa fa-cog"></i></a>
            <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
          </div>
        </div>
      </div>
      <!-- / dropdown -->
    </li>
    <li class="dropdown" dropdown>
      <a class="dropdown-toggle clear" dropdownToggle>
              <span class="thumb-sm avatar pull-right m-t-n-sm m-b-n-sm m-l-sm">
                <img src="assets/img/a0.jpg" alt="...">
                <i class="on md b-white bottom"></i>
              </span>
        <span class="hidden-sm hidden-md">LarryYan</span> <b class="caret"></b>
      </a>
      <!-- dropdown -->
      <ul class="dropdown-menu animated fadeInRight w">
        <li class="wrapper b-b m-b-sm bg-light m-t-n-xs">
          <div>
            <p>300mb of 500mb used</p>
          </div>
          <progressbar value="20" animate="true" class="progress-xs m-b-none bg-white"></progressbar>
        </li>
        <li>
          <a href>
            <span class="badge bg-danger pull-right">30%</span>
            <span>设置</span>
          </a>
        </li>
        <li>
          <a ui-sref="app.page.profile">个人中心</a>
        </li>
        <li>
          <a ui-sref="app.docs">
            <span class="label bg-info pull-right">new</span>
            帮助
          </a>
        </li>
        <li class="divider"></li>
        <li>
          <a ui-sref="access.signin">退出</a>
        </li>
      </ul>
      <!-- / dropdown -->
    </li>
  </ul>
  <!-- / navbar right -->

</div>
<!-- / navbar collapse -->
